<template>
  <div class="drawer-relation-editor-left-side">
    <DrawerRelationEditorLeftSideTitle title="关联"/>
    <div v-for="item in editFormRelations"
         class="drawer-relation-editor-item" @click="() => selectItem(item)"
         :class="{'drawer-relation-editor-item-selected': selectedItemKey === item.id}">
      <div style="flex: 1" class="drawer-relation-editor-item-title" :title="item.relationName">
        {{ item.relationName }}
      </div>
      <div class="button-wrapper" style="padding: 0 10px;">
        <a-button @click.stop="() => remove(item)" shape="circle" icon="close" size="small" type="danger"/>
      </div>
    </div>
    <div class="drawer-relation-editor-left-side-divider"/>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import DrawerRelationEditorLeftSideTitle
  from '@comp/hhd/design/relation/DrawerRelationEditorLeftSide/DrawerRelationEditorLeftSideTitle.vue';
import {deleteAction} from '@api/manage';

export default {
  name: 'DrawerRelationEditorLeftSide',
  components: {DrawerRelationEditorLeftSideTitle},
  model: createModelForVue('selectedItemKey'),
  props: {
    editFormRelations: createProps(Array),
    selectedItemKey: createProps(String),
  },
  methods: {
    remove(item) {
      this.$confirm({
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.removeById(item.id);
        }
      });
    },
    removeById(id) {
      this.loading = true;
      deleteAction('/relation/designFormRelation/removeById', {id}).then(data => {
        if (data.success) {
          let len = this.editFormRelations.length;
          this.$emit('refreshFormDefinition');
          if (len === 1) {
            this.$emit('close');
          }
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    },
    selectItem(item) {
      this.$emit('change', item.id);
      this.$emit('editRelation', item);
    },
  }
};
</script>
<style>
.drawer-relation-editor-left-side {
  width: 180px;
  border-right: 1px solid #d9d9d9;
  height: 100%;
  overflow: auto;
}

.drawer-relation-editor-item-selected {
  background: #1f85ec;
  color: white;
}

.drawer-relation-editor-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  padding: 5px 0 5px 25px;
}

.drawer-relation-editor-item-selected .button-wrapper {
  display: block;
}

.button-wrapper {
  display: none;
}

.drawer-relation-editor-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.button-wrapper button {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.drawer-relation-editor-left-side-divider {
  border-top: 1px solid #d9d9d9;
  margin-top: 10px;
}
</style>